  <template>
      <div class="box" ref='pieChartRef'></div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'PieChart',
  })
  </script>
  <script setup  lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-liquidfill';

  const props = defineProps<{
    label: string;
    useValue: number;
  }>()
  
  const { label, useValue } = toRefs(props)
  let pieChart: echarts.ECharts | null = null;
  const pieChartRef = ref<HTMLDivElement>()
  
  function setPieChartOption() {
    // 根据数值范围确定颜色类型
    const value = useValue.value / 100;
    const isHighValue = value > 0.9;
    const isMediumValue = value > 0.8 && value <= 0.9;
    const isLowValue = value <= 0.8;
    
    // 蓝色系（默认）
    const lowColors = [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#1156a9' },
        { offset: 1, color: '#0a3671' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#1389d7' },
        { offset: 1, color: '#1156a9' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#42b9fa' },
        { offset: 1, color: '#1156a9' }
      ]),     
    ];
    
    // 黄色系（80%-90%）
    const mediumColors = [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#3d3a20' },
        { offset: 1, color: '#2a2815' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#7a7435' },
        { offset: 1, color: '#42402a' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#ffd86b' },
        { offset: 1, color: '#e6c355' }
      ]),
    ];
    
    // 红色系（大于90%）
    const highColors = [
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#422a2a' },
        { offset: 1, color: '#2a1a1a' }
      ]), 
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#7a3535' },
        { offset: 1, color: '#422a2a' }
      ]),
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#ff6b6b' },
        { offset: 1, color: '#ed5555' }
      ]),
    ];
    
    // 根据值范围选择颜色和边框颜色
    let colors, borderColor, backgroundColor;
    
    if (isHighValue) {
      colors = highColors;
      borderColor = '#ed6b6b';
      backgroundColor = '#ed6b6b';
    } else if (isMediumValue) {
      colors = mediumColors;
      borderColor = '#e6c355';
      backgroundColor = '#3d3a20';
    } else {
      colors = lowColors;
      borderColor = '#1594e9';
      backgroundColor = '#1a2a4d';
    }

    return {
      series: [
        {
          name: label.value,
          type: 'liquidFill',
          data: [value, value * 0.9, value * 0.8], // 水波分层对应数据
          radius: '90%',
          shape: 'circle',
          center: ['50%', '50%'],
          backgroundStyle: {
            borderColor: borderColor,
            borderWidth: 2,
            color: backgroundColor
          },
          color: colors,
          outline: {
            show: false
          },
          label: {
            show: true,
            formatter: (p: any) => {
              const percentage = (p.value * 100).toFixed(0);
              return `{a|${p.seriesName}}\n{b|${percentage}%}`;
            },
            rich: {
              a: {
                fontSize: 12,
                color: '#fff',
              },
              b: {
                fontSize: 20,
                color: '#fff',
              }
            },
            position: ['50%', '50%'],
          }
        }
      ]
    };
  }
  
  function initChart() {
    if (!pieChartRef.value) return;
    if (pieChart) {
      pieChart.dispose();
    }
    pieChart = echarts.init(pieChartRef.value);
    pieChart.setOption(setPieChartOption());
  }
  
  function updateChart() {
    if (!pieChart) return;
    pieChart.setOption(setPieChartOption());
  }
  
  watch([() => props.useValue], () => {
    updateChart();
  })
  
  function handleResize() {
    pieChart?.resize();
  }
  
  onMounted(() => {
    // 延迟初始化，确保容器尺寸已经计算好
    setTimeout(() => {
      initChart();
    }, 50);
    window.addEventListener('resize', handleResize);
  })
  
  onBeforeUnmount(() => {
    if (pieChart) {
      pieChart.dispose();
      pieChart = null;
    }
    window.removeEventListener('resize', handleResize);
  })
  </script>
  
  <style lang="scss" scoped>
    .box {
      width: 100%;
      height: 100%;
      min-height: 140px;
    }

  </style>
  